<template>
        <div style="display:flex; height:185px">
            <div class="enterpriseRisk" id="enterpriseRisk" ref="enterpriseRisk" style="width:40%;height:185px">

            </div>
            <div class="list">
                <div class="list_item" v-for="(item,index) in list" :key="index" @click="searchBQ(item.enterpriseLabel)">
                    <span >{{item.enterpriseLabel}}</span>
                </div>
            </div>
        </div>
            
</template>

<script>
import echarts from 'echarts'

import { mapGetters } from 'vuex'
import { reqClassificationCustomsAreas } from '@/api/home'
export default {
    data(){
        return {
            list: [],
          
        }
    },
    computed: {
        ...mapGetters(['customCode']),
       
    },
    watch: {
        list: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            },

        },
        customCode(val) {
            // console.log(val);
            this.getList(val)

        },
    },
    mounted() {
       
        this.$nextTick(() => {
            this.initChart();
        });
    },
    created() {
        if (this.customCode == '' || !this.customCode) {
            this.getList('22')
        } else {
            this.getList(this.customCode)
        }   
    },
    methods: {
        searchBQ(val){
            this.$store.commit('homeStatus/changeEnterpriseLabel', val)
        },
        async getList(val) {
            const res = await reqClassificationCustomsAreas({ customsCode: val })
            //    const res1= await reqAdministrativeSanction({customsCode:val,page:1,size:10})
            // console.log('2222', res);
            this.list = res.data.abnormalEnterprise
           
            this.chart.hideLoading();
        },
        initChart() {
            this.chart = echarts.init(document.getElementById('enterpriseRisk'), null, { renderer: 'canvas' })
            this.chart.showLoading({
                text: '',
                color: '#c23531',
                textColor: '#000',
                maskColor: 'rgba(255, 255, 255, 0)',
            })
            // this.setOptions(this.list, this.showError);
        },
    
        setOptions(list){
          
            // const nameList = list.map(item => {
            //     return item.enterpriseLabel
            // })
            let dataList = []
            list.forEach(item => {
                dataList.push({
                    name: item.enterpriseLabel,
                    value: item.labelNum,
                    // rate: item.toClassificationRate
                })
            })
            const colorList = [
                "#47A2FF ",
                "#53C8D1",
                "#59CB74",
                "#FBD444",
                "#7F6AAD",
                "#585247",
                "#85acfb",
                "#cfdffd",
                "#85e2bd",
                "#daf6eb",
                "#8795ae",
                "#dbdfe6",
                "#f8ce52",
                "#fdf0cb",
                "#9488fb",
                "#d5d0fd",
                "#93d6f1",
                "#def2fb",
                "#b088cb",
            ];
            this.chart.setOption({
                graphic: {
                    type: 'text',     // 类型：文本
                    left: 'center',
                    top: 'middle',
                    silent: true,     // 不响应事件
                    invisible: list.length > 0,   // 有数据就隐藏
                    style: {
                        fill: '#9d9d9d',
                        fontWeight: 'bold',
                        text: '查无数据',
                        fontFamily: 'Microsoft YaHei',
                        fontSize: 25
                    }
                },
                title: {
                    text: list.length > 0 ? "异常企业" : '',

                    textStyle: {
                        fontSize: 16,
                        color: "#fff",
                        lineHeight: 16,
                    },

                    textAlign: "center",
                    left: "48%",
                    top: "44%",
                },
                tooltip: {
                    trigger: "item",
                    formatter: `{b}: {c}` + '个'
                },
                // legend: {
                //     type: "scroll",
                //     orient: "vertical",
                //     right: "10%",
                //     top: "center",
                //     // itemGap: 30,
                //     // selectedMode: false,
                //     icon: "pin",
                //     height: 180,
                //     data: nameList,
                //     pageIconColor: "white",//激活的分页按钮颜色
                //     pageIconInactiveColor: "#2f4554",//没激活的分页按钮颜色
                //     pageTextStyle: {
                //         color: '#fff'
                //     },
                //     textStyle: {
                //         color: "#fff",
                //         rich: {
                //             uname: {
                //                 width: 200,
                //             },
                //             unum: {
                //                 color: "#4ed139",
                //                 width: 10,
                //                 align: "right",
                //             },
                //         },
                //     },
                //     formatter(name) {
                //         return `{uname|${name}}`;
                //     },
                // },
                color: colorList,
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: [50, 80],
                        center: ["50%", "50%"],
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                            borderWidth: 3,

                        },
                        data: dataList
                    },
                ],
            })
             
          
        }
    }

}
</script>

<style scoped lang="scss">
.list {
    margin-top: 10px;
    margin-left: 20px;
    height:185px;
    overflow-x:auto ;
    text-align: start;
    font-size: 14px;
    .list_item {
        color: #fff;
        height: 25px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
    }
    .list_item:hover {
        color: #00C1FF;
    }
}
</style>